<template>
    <div>
        <Nav/>
         <!-- main开始     start -->
        <div class="main">
            <div class="w">
                <div class="conPoin" v-if="categoryView.category1Name"> 
                    <a href="">{{categoryView.category1Name}}</a>
                    <span>/</span>
                    <a href="">{{categoryView.category2Name}}</a>
                    <span>/</span>
                    <a href="">{{categoryView.category3Name}}</a>
                </div>
                <div class="mainCon">
                    <div class="mainCon_left">
                        <Zoom :skuImageList="skuImageList" v-show="skuImageList.length>0"/>
                        <ImageList :skuImageList="skuInfo.skuImageList" v-show="skuImageList.length>0"/> 
                        <!-- <Zoom :skuImageList="skuInfo.skuImageList" v-show="skuInfo.skuImageList || {}"/>
                        <ImageList :skuImageList="skuInfo.skuImageList"/> -->
                    </div>
                    <div class="mainCon_right">
                        <div class="bigCon">
                            <h3>{{skuInfo.skuName}}</h3>
                            <p class="color">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                            <div class="priceArea">
                                <div class="priceArea_top">
                                    <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                                        <span>¥ 
                                            <i>{{skuInfo.price}}</i>
                                            <strong>降价通知</strong>
                                        </span>
                                    </p>
                                    <strong>累计评价 65545</strong>
                                </div>
                                <div class="priceAre_bottom">
                                    <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销
                                    </p>
                                    <div class="left">
                                        <span>加价购</span>
                                        <strong>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</strong>
                                    </div>
                                </div>
                            </div>
                            <div class="support">
                                <div class="supportArea">
                                    <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
                                    <span>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</span>
                                </div>
                                <div class="supportArea">
                                    <p>配&nbsp;送&nbsp;至</p>
                                    <span>广东省 深圳市 宝安区</span>
                                </div>
                            </div>
                            <div class="chooseArea">
                                <div class="big_chooseArea" 
                                    v-for="(list) in spuSaleAttrList" 
                                    :key="list.id"
                                     >
                                    <p>{{list.saleAttrName}}</p>
                                    <ul>
                                        <li
                                        v-for="(spuList) in list.spuSaleAttrValueList" 
                                        :key="spuList.id"
                                        @click='ChooseArea(list,spuList)'
                                        :class="{set_li: spuList.isChecked == 1}"
                                        >{{spuList.saleAttrValueName}}</li>
                                    </ul>
                                </div>
                                <div class="cartWrap">
                                    <div class="controls">
                                        <!-- 失去焦点 @blur -->
                                        <input type="text" name="" id="" v-model.number="number" @blur="isNum">
                                        <a href.prevent="" class="toadd" @click="number++">+</a>
                                        <a href.prevent="" class="toremover" @click="removeNum">-</a>
                                    </div>
                                    <div class="add">
                                        <a href.prevent="" @click="addCart">加入购物车</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="productDetail_left">
                        <div class="tabWraped">
                            <p>相关分类</p>
                            <p>推荐品牌</p>
                        </div>
                        <div class="tabContent">
                            <ul class="partList">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="goodsList">
                                <li>
                                    <div class="p-img">
                                        <img src="./imges/part01.png" alt="">
                                    </div>
                                    
                                    <p>Apple苹果iPhone 6s (A1699)</p>
                                    <span>¥ 6088.00</span>
                                    <br>
                                    <div class="operate">
                                        <a href="">加入购物车</a>
                                    </div> 
                                </li>
                                <li>
                                    <div class="p-img">
                                        <img src="./imges/part02.png" alt="">
                                    </div>
                                    
                                    <p>Apple苹果iPhone 6s (A1699)</p>
                                    <span>¥ 6088.00</span>
                                    <br>
                                    <div class="operate">
                                        <a href="">加入购物车</a>
                                    </div>    
                                </li>
                                <li>
                                    <div class="p-img">
                                        <img src="./imges/part03.png" alt="">
                                    </div>
                                    <p>Apple苹果iPhone 6s (A1699)</p>
                                    <span>¥ 6088.00</span>
                                    <br>
                                    <div class="operate">
                                        <a href="">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="p-img">
                                        <img src="./imges/part02.png" alt="">
                                    </div>
                                    <p>Apple苹果iPhone 6s (A1699)</p>
                                    <span>¥ 6088.00</span>
                                    <br>
                                    <div class="operate">
                                        <a href="">加入购物车</a>
                                    </div>       
                                </li>
                                <li>
                                    <div class="p-img">
                                        <img src="./imges/part03.png" alt="">
                                    </div>
                                    <p>Apple苹果iPhone 6s (A1699)</p>
                                    <span>¥ 6088.00</span>
                                    <br>
                                    <div class="operate">
                                        <a href="">加入购物车</a>
                                    </div> 
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="productDetail_right">
                        <div class="fitting">
                            <h4>选择搭配</h4>
                            <div class="good-suits">
                                <div class="master">
                                    <img src="./imges/l-m01.png" alt="">
                                    <!-- <span>+</span> -->
                                    <p>￥5299</p>
                                </div>
                                <i class="add">+</i>
                                <ul>
                                    <li>
                                        <img src="./imges/dp01.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <label for="">
                                            <input type="checkbox" name="" id="">
                                            <i>39</i>
                                        </label>     
                                    </li>
                                    <li>
                                        <img src="./imges/dp02.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <label for="">
                                            <input type="checkbox" name="" id="">
                                            <i>50</i>
                                        </label>     
                                    </li>
                                    <li>
                                        <img src="./imges/dp03.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <label for="">
                                            <input type="checkbox" name="" id="">
                                            <i>59</i>
                                        </label>     
                                    </li>
                                    <li>
                                        <img src="./imges/dp04.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <label for="">
                                            <input type="checkbox" name="" id="">
                                            <i>99</i>
                                        </label>     
                                    </li>
                                </ul>
                                <div class="result">
                                    <p>已选购0件商品</p>
                                    <strong>套餐价</strong>
                                    <!-- <br> -->
                                    <span>¥5299</span>
                                    <!-- <br> -->
                                    <a href="">加入购物车</a>
                                </div>
                            </div>
                            
                        </div>
                        <div class="intro">
                            <ul class="tab-wraped">
                                <li>
                                    <a href="">商品介绍</a>
                                </li>
                                <li>
                                    <a href="">规格与包装</a>
                                </li>
                                <li>
                                    <a href="">售后保障</a>
                                </li>
                                <li>
                                    <a href="">商品评价</a>
                                </li>
                                <li>
                                    <a href="">手机社区</a>
                                </li>
                            </ul>
                            <ul class="goods-intro">
                                <li>分辨率：1920*1080(FHD)</li>
                                <li>后置摄像头：1200万像素</li>
                                <li>前置摄像头：500万像素</li>
                                <li>核 数：其他</li>
                                <li>频 率：以官网信息为准</li>
                                <li>品牌： Apple</li>
                                <li>商品名称：APPLEiPhone 6s Plus</li>
                                <li>商品编号：1861098</li>
                                <li>商品毛重：0.51kg</li>
                                <li>商品产地：中国大陆</li>
                                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                <li>系统：苹果（IOS）</li>
                                <li>像素：1000-1600万</li>
                                <li>机身内存：64GB</li>
                                <li class="toimg first">
                                    <img src="./imges/intro01.png" alt="">
                                </li>
                                <li class="toimg">
                                    <img src="./imges/intro02.png" alt="">
                                </li>
                                <li class="toimg">
                                    <img src="./imges/intro03.png" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- main开始     end -->
    </div>
</template>

<script>
import Zoom from './zoom.vue'
import ImageList from './ImageList.vue'
import {mapGetters} from 'vuex'
export default {
    name:'detail',
    data() {
        return {
            fleg:false,
            number:1
        }
    },
    mounted() {
        this.get_detail()
    },
    components:{
        Zoom,ImageList
    },
    methods: {
       get_detail(){
             this.$store.dispatch('detail/get_detail',this.$route.params.skuid); 
        },
        ChooseArea(list,spuList){
            list.spuSaleAttrValueList.forEach(element => {
                element.isChecked=0
            });
            spuList.isChecked = 1
        },
        // 输入框的数
        isNum(){
            // 取整 输入框的数
           this.number =  parseInt(this.number)
            if(this.number<=0){
                this.number = 1
            }
        },
        removeNum(){
            this.number--;
            if(this.number<=0){
                this.number=1
            }
        },
       async addCart(){
        //    如果点击的加入购物车 则把fleg等于true
        //    因为如果客户在当前路由  直接再次在地址栏输入下一个跳转地址  则可以直接进入不用点击
        //    fleg = true  则表示点击了该按钮才可以进入下一个    如果客户直接在地址栏换地址则一直会为false 则不会跳转
           this.$route.meta.fleg = true
           try {
               await this.$store.dispatch('detail/getToCart',[this.$route.params.skuid,this.number])
               let obj = {
                id:this.skuInfo.id,
                skuImg:this.skuInfo.skuDefaultImg,
                skuName:this.skuInfo.skuName,
                skuNuber:this.number,
                spuSaleAttrList:this.spuSaleAttrList
                }
                sessionStorage.setItem('addCart',JSON.stringify(obj));
                 this.$router.push({
                    name:'addCart'
                })
           } catch (error) {
               console.log(error);
           }   
       }
    },
    computed: {
        ...mapGetters('detail',['categoryView','skuInfo','spuSaleAttrList']),
        skuImageList(){
            return this.skuInfo.skuImageList || []
        }
    },
}
</script>

<style scoped lang='less'>
.bottom{
    display: none;
}
.main{
    .w{
        .conPoin{
            margin-top:30px;
            span{
                padding: 0px 5px;
            }
            a:hover{
                text-decoration: underline;
                color: red;
            }
        }
        .Pointwo{
            margin-top: 5px;
        }
        .mainCon{
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            .mainCon_left{
                position: relative;
                .specScroll{
                    width: 402px;
                    height: 52px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 5px;
                    .specScroll_left{
                        height: 50px;
                        border: 1px solid #CCC;
                        background: #EBEBEB;
                        margin-right: 5px;
                        line-height: 50px;
                        text-align: center;
                    }
                    .specScroll_center{
                        width: 372px;
                        overflow: hidden;
                        display: flex;
                        img{
                            border: 1px solid #CCC;
                            height: 50px;
                            width: 50px;
                            margin-right: 11px;
                        }
                        
                    }
                    .specScroll_right{
                        margin-right: 0px;
                    }
                }
            }
            
            .mainCon_right{
                margin-left: 10px;
                .bigCon{
                    h3{
                        color: #000;
                        margin-top: 15px;
                        margin-bottom: 10px;
                    }
                    .color{
                        color: #e12228;
                        margin-bottom: 15px;
                    }

                    .priceArea{
                        font-size: 12px;
                        width: 700px;
                        box-sizing: border-box;
                        background: #fee9eb;
                        padding: 7px;
                        .priceArea_top{
                            display: flex;
                            justify-content: space-between;
                            p{
                                color:#333 ;
                                span{
                                    color: #c81623;
                                    margin-left: 15px;
                                    font-size: 16px;
                                    i{
                                        font-size: 24px;
                                        font-weight: 700;
                                        color: #c81623;
                                    }
                                    strong{
                                        font-size: 12px;
                                        font-weight: normal;
                                    }
                                }
                                margin-bottom: 0;
                            }
                            strong{
                                font-weight: normal;
                                color: #000;
                                line-height: 45px;
                            }
                        }
                        .priceAre_bottom{
                            display: flex;
                            p{
                                color:#333 ;
                            }
                            .left{
                                box-sizing: border-box;
                                padding-left: 20px;
                                width: 520px;
                                span{
                                    height: 20px;
                                    background: #c81623;
                                    color: #fff;
                                    padding: 3px;
                                }
                                strong{
                                    font-weight: normal;
                                    width: 475px;
                                    color: #999;
                                    line-height: 25px;
                                }
                            }
                        }
                    }
                    .support{
                        padding-left: 7px;
                        margin-top: 18px;
                        color:#333 ;
                        border-bottom: 1px solid #ededed;
                        .supportArea{
                            display: flex;
                            height: 25px;
                            margin-top: 10px;
                            p{
                                color:#333 ;
                            }
                            span{
                                margin-left: 20px;
                                color: #999;
                            }
                        }
                    }
                    .chooseArea{
                        margin-top: 20px;
                        .big_chooseArea{
                            display: flex;
                            margin-top: 16px;
                            p{
                                margin-left: 7px;
                                line-height: 30px;
                            }
                            ul{
                                display: flex;
                                margin-left: 20px;
                                .red{
                                    color: red;
                                }
                                li{
                                    cursor: pointer;
                                    padding: 2px 14px;
                                    border-top: 1px solid #eee;
                                    border-right: 1px solid #bbb;
                                    border-bottom: 1px solid #bbb;
                                    border-left: 1px solid #eee;
                                    margin-right: 5px;
                                    line-height: 24px;
                                }
                                .set_li{
                                    border: 1px solid green;
                                    color: green;
                                }
                            }
                        }
                        
                    }
                    .cartWrap{
                        display: flex;
                        margin-top: 15px;
                        .controls{
                            display: flex;
                            position: relative;
                            input{
                                margin-left: 7px;
                                width: 38px;
                                height: 37px;
                                border: 1px solid #ddd;
                                color: #555;
                                text-align: center;
                            }
                            a{
                                position: absolute;
                                cursor: pointer;
                                left: 46px;
                                display: block;
                                width: 15px;
                                text-align: center;
                                height: 17px;
                                line-height: 17px;
                                background: #f1f1f1;
                                color: #666;
                                border: 1px solid #ccc;
                            }
                            .toadd{
                                height: 19px;
                            }
                            .toremover{
                                bottom: 0;
                                left: 46px;
                            }
                        }
                        .add{
                            margin-left: 28px;
                            a{
                                cursor: pointer;
                                background-color: #e1251b;
                                font-size: 16px;
                                height: 39px;
                                line-height: 36px;
                                display: block;
                                width: 130px;
                                text-align: center;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }

        .productDetail{
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            .productDetail_left{
                width: 210px;
                border: 1px solid #ccc;
                height: 1230px;
                .tabWraped{
                    display: flex;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    &>p:first-child{
                        border-top: 3px solid #e1251b;
                    }
                    &>p:last-child{
                        border-top: 3px solid #fff;
                        font-weight: 700;
                        border-bottom: 1px solid #ccc;
                    }
                    p{
                        box-sizing: border-box;
                        width: 50%;
                    }
                }
                .tabContent{
                    padding: 10px;
                    .partList{
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            width: 50%;
                            height: 30px;
                            line-height: 30px;
                            border-bottom: 1px dashed #ededed;
                        }
                    }
                    .goodsList{
                        li{
                            margin-top: 10px;
                            border-bottom: 1px solid #ededed;
                            .p-img{
                                text-align: center;
                            }
                            p{
                                color: #000;
                            }
                            span{
                                font-size: 16px;
                                color: #c81623;
                            }
                            .operate{
                                margin-top: 5px;
                                margin-bottom: 10px;
                                text-align: center;
                                a{
                                    display: inline-block;
                                    padding: 2px 14px;
                                    line-height: 18px;
                                    background-color: transparent;
                                    border: 1px solid #8c8c8c;
                                    color: #8c8c8c;
                                    text-align: center;
                                }
                            }
                         
                        }
                    }
                }
            }
            .productDetail_right{
                width: 980px;
                .fitting{
                    border: 1px solid #ddd;
                    h4{
                        height: 27px;
                        padding-left: 7px;
                        border-bottom: 1px solid #ddd;
                        line-height: 27px;
                        background: #f1f1f1;
                        color: #333;
                    }
                    .good-suits{
                        padding: 10px 0px;
                        position: relative;
                        display: flex;
                        .master{
                            width: 127px;
                            height: 165px;
                            text-align: center;
                            p{
                                color: #c81623;
                                font-size: 16px;
                                font-weight: 700;
                            }
                        }
                        .add{
                            position: absolute;
                            top: 48px;
                            font-size: 16px;
                            left: 130px;
                        }
                        ul{
                            display: flex;
                            li{
                                margin-left: 45px;
                                display: flex;
                                flex-direction: column;
                                span {
                                    align-self: center;
                                }
                                label{
                                    align-self: center;
                                }
                            }
                        }
                        .result{
                            display: flex;
                            flex-direction: column;
                            box-sizing: border-box;
                            padding-left: 20px;
                            padding-top: 10px;
                            margin-left: 10px;
                            width: 170px;
                            border-left: 1px solid #ddd;
                            p{
                                font-size: 14px;
                                color: #000;
                                margin-bottom: 10px;
                            }
                            strong{
                                color: #333;
                                margin-bottom: 10px;
                            }
                            span{
                                color: #B1191A;
                                font-size: 16px;
                                margin-bottom: 10px;
                            }
                            a{
                                width: 132px;
                                height: 42px;
                                text-align: center;
                                line-height: 42px;
                                background-color: #e1251b;
                                color: #fff;
                            }
                        }
                    }
                }
                .intro{
                    .tab-wraped{
                        display: flex;
                        background: #ededed;
                        margin-top: 20px;
                        &>li:first-child{
                            border-left: 1px solid #ddd;
                            background: #e1251b;
                            a{
                                color: #fff;
                            }
                        }
                        li{
                            height: 40px;
                            width: 70px;
                            text-align: center;
                            line-height: 40px;
                            border-top: 1px solid #ddd;
                            border-bottom: 1px solid #ddd;
                            border-right: 1px solid #ddd;
                            background: #fcfcfc;
                        }
                    }
                    .goods-intro{
                        li{
                            line-height: 25px;
                            margin-left: 12px;
                        }
                        .first{
                            margin-top: 7px;
                        }
                        .toimg{
                            margin-left: 0px;
                        }
                    }
                }
            }
        }

        .like{
            border: 1px solid #ddd;
            h4{
                border-bottom: 1px solid #ddd;
                background: #f1f1f1;
                color: #333;
                padding: 5px 10px;
            }
            ul{
                padding: 15px 11px;
                display: flex;
                li{
                    width: 196px;
                    .li_img{
                        text-align: center;
                    }
                    .li_text{
                        display: flex;
                        flex-direction: column;
                        padding: 0 21px;
                        span{
                            font-size: 16px;
                            color: #c81623;
                        }
                        i{
                            margin-top: 10px;
                            color: #000;
                        }
                    }
                }
            }
        }
    }
   
}
</style>